---
title: <AcceptInvitationCard />
---

The `<AcceptInvitationCard />` component handles the organization invitation acceptance flow. It displays invitation details and allows users to accept or reject organization invitations.

## Usage

This component is typically used on a dedicated invitation acceptance page:

```tsx
import { AcceptInvitationCard } from '@daveyplate/better-auth-ui'

export function AcceptInvitationPage() {
  return (
    <AcceptInvitationCard />
  )
}
```

## Features

- **Invitation Display**: Shows organization details and assigned role
- **Accept/Reject Actions**: Allow users to accept or reject invitations
- **Authentication Check**: Automatically redirects to sign-in if not authenticated
- **Expiration Handling**: Validates invitation expiration
- **Error Handling**: Displays appropriate error messages

## URL Parameters

The component expects an `invitationId` in the URL query parameters:

```
/auth/accept-invitation?invitationId=inv_123456
```

## Reference

<AutoTypeTable path="../src/components/organization/accept-invitation-card.tsx" name="AcceptInvitationCardProps" />

## Examples

### Basic Usage

```tsx
// app/auth/accept-invitation/page.tsx
import { AcceptInvitationCard } from '@daveyplate/better-auth-ui'

export default function AcceptInvitationPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <AcceptInvitationCard />
    </div>
  )
}
```

### With Custom Class Names

```tsx
<AcceptInvitationCard 
  classNames={{
    base: "max-w-md",
    header: "text-center",
    button: "rounded-full"
  }}
/>
```

### With Custom Localization

```tsx
<AcceptInvitationCard 
  localization={{
    ACCEPT_INVITATION: "Join Team",
    REJECT: "Decline",
    ACCEPT: "Join"
  }}
/>
```

## Invitation Flow

1. **Email Sent**: User receives invitation email with link
2. **Click Link**: User clicks invitation link with ID
3. **Authentication**: If not signed in, redirected to sign-in
4. **View Invitation**: Component displays organization and role
5. **Accept/Reject**: User chooses to accept or reject
6. **Join Organization**: On accept, user joins organization

## Displayed Information

The card shows:
- Organization name and logo
- Organization slug/URL
- Assigned role (Owner, Admin, Member, or custom)
- Accept and reject buttons

## Error States

The component handles various error scenarios:

- **Invalid Invitation**: Invitation ID not found
- **Expired Invitation**: Past expiration date
- **Already Processed**: Invitation already accepted/rejected
- **Authentication Required**: User not signed in

## Security

- Invitation IDs are secure random tokens
- Server-side validation of invitation status
- Expiration dates are enforced
- User authentication is required

## Integration

Set up the invitation route in your auth configuration:

```tsx
// Using AuthCard with ACCEPT_INVITATION view
<AuthCard view="ACCEPT_INVITATION" />

// Or direct component usage
<AcceptInvitationCard />
```

## Best Practices

1. **Custom Domain**: Use your app domain for invitation links
2. **Expiration Time**: Set reasonable expiration (7-14 days)
3. **Email Template**: Customize invitation email design
4. **Success Redirect**: Configure post-acceptance redirect
5. **Error Pages**: Handle invalid invitation gracefully 